<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      @on-load="onLoad"
      :page.sync="page"
      @current-change="currentChange"
      @size-change="sizeChange"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
      <template
        slot="menuLeft"
        slot-scope="{}"
      >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        > 新增 </el-button>
        <el-button
          type="primary"
          icon="el-icon-download"
          @click="mobanDown"
        >模板下载</el-button>
        <el-upload
          :action="uploadUrl"
          class="uplaod"
          :headers="headers"
          multiple
          :show-file-list="false"
          ref="addManageUpload"
          :auto-upload="true"
          :on-success="handleSuccess"
          :on-progress="uploadProgress"
          accept=".xls, .xlsx"
        >
          <el-button
            icon="el-icon-upload"
            :loading="uploading"
            type="primary"
          >导入数据</el-button>
        </el-upload>
      </template>
    </avue-crud>
    <div class="add">
      <el-card class="box-card">
        <p class="tip">1.数据报送逻辑：银行机构在平台接入后的相关放款，确实已通过平台查询过企业相关信息的，即可纳入该报表范围；</p>
        <p class="tip">2.该报表统计的是年度累计数，因此除首次报送11月份报表以及年初第一个月报送报表数字为当月数，之后月度均应报送当年度累计数；</p>
        <p class="tip">3.请在每月初3日内报送上月报表；</p>
        <p class="tip">4.提交后报送数据将不能修改，若要修改请及时联系淄博征信有限公司13776702921。</p>
      </el-card>
      <el-dialog
        title="新增"
        :visible.sync="showFlag"
        width="50%"
        append-to-body
        center
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="200"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="银行机构名称"
                prop="yhjgmc"
                class="formItem"
              >
                <!-- <el-input v-model="form.yhjgmc" clearable></el-input> -->
                <el-select
                  v-model="form.yhjgmc"
                  filterable
                  placeholder="请选择银行机构名称"
                  clearable
                  class="w100"
                >
                  <el-option
                    v-for="item in jgOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="上报数据年月"
                prop="sbsjny"
                class="formItem"
              >
                <el-date-picker
                  class="w100"
                  v-model="form.sbsjny"
                  type="month"
                  clearable
                  :picker-options="picker"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  placeholder="选择上报数据年月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="本年累计提出融资申请的企业户数"
                prop="bnljRzsqQyhs"
                class="formItem"
              >
                <el-input
                  v-model="form.bnljRzsqQyhs"
                  type="number"
                  clearable
                >
                  <template slot="append">户</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="获得融资的企业户数"
                prop="rzhs"
                class="formItem"
              >
                <el-input
                  v-model="form.rzhs"
                  type="number"
                  clearable
                >
                  <template slot="append">户</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="其中：信用贷款户数"
                prop="xyDkhs"
                class="formItem"
              >
                <el-input
                  v-model="form.xyDkhs"
                  type="number"
                  clearable
                >
                  <template slot="append">户</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="获得融资金额"
                prop="rzje"
                class="formItem"
              >
                <el-input
                  v-model="form.rzje"
                  type="number"
                  clearable
                >
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="其中：信用贷款金额"
                prop="xyDkje"
                class="formItem"
              >
                <el-input
                  v-model="form.xyDkje"
                  type="number"
                  clearable
                >
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="获得融资的企业平均贷款利率"
                prop="jzlv"
                class="formItem"
              >
                <el-input
                  v-model="form.jzlv"
                  type="number"
                  clearable
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="本年累计首次申请授信的企业户数"
                prop="bnljSxQyhs"
                class="formItem"
              >
                <el-input
                  v-model="form.bnljSxQyhs"
                  type="number"
                  clearable
                >
                  <template slot="append">户</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="首次申请并获得授信的企业户数"
                prop="scHdsxQyhs"
                class="formItem"
              >
                <el-input
                  v-model="form.scHdsxQyhs"
                  type="number"
                  clearable
                >
                  <template slot="append">户</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="首次申请并获得授信的贷款金额"
                prop="scHdsxDkje"
                class="formItem"
              >
                <el-input
                  v-model="form.scHdsxDkje"
                  type="number"
                  clearable
                >
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="首次申请并获得融资的企业户数"
                prop="scSqhdrzQyhs"
                class="formItem"
              >
                <el-input
                  v-model="form.scSqhdrzQyhs"
                  type="number"
                  clearable
                >
                  <template slot="append">户</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="首次申请并获得融资金额"
                prop="scSqhdrzJe"
                class="formItem"
              >
                <el-input
                  v-model="form.scSqhdrzJe"
                  type="number"
                  clearable
                >
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="submitCheck"
          >确认</el-button>
          <el-button @click="showFlag = false">取消</el-button>
        </div>
        <el-card class="box-card">
          <p class="tips">tips:提交后报送数据将不能修改，若要修改请及时联系淄博征信有限公司13776702921。</p>
        </el-card>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  addDataFilling,
  downLoadSqxys,
  searchHistory,
  getbank,
} from '@/api/report.js'
export default {
  data() {
    return {
      uploadUrl: '',
      headers: undefined,
      showFlag: false,
      form: {},
      checkForm: {},
      picker: {
        disabledDate(time) {
          const t = new Date().getDate()
          return time.getTime() > Date.now()
        },
      },
      jgOptions: [],
      rules: {
        yhjgmc: [
          { required: true, message: '请输入银行机构名称', trigger: 'change' },
        ],
        /* tbr: [
                    { required: true, message: '请输入填报人', trigger: 'blur' }
                ], */
        sbsjny: [
          { required: true, message: '请选择上报数据年月', trigger: 'change' },
        ],
        bnljRzsqQyhs: [
          {
            required: true,
            message: '请输入本年累计提出融资申请的企业户数',
            trigger: 'blur',
          },
        ],
        rzhs: [
          {
            required: true,
            message: '请输入获得融资的企业户数',
            trigger: 'blur',
          },
        ],
        xyDkhs: [
          {
            required: true,
            message: '请输入其中：信用贷款户数',
            trigger: 'blur',
          },
        ],
        rzje: [
          { required: true, message: '请输入获得融资金额', trigger: 'blur' },
        ],
        xyDkje: [
          {
            required: true,
            message: '请输入其中：信用贷款金额',
            trigger: 'blur',
          },
        ],
        bnljSxQyhs: [
          {
            required: true,
            message: '请输入本年累计首次申请授信的企业户数',
            trigger: 'blur',
          },
        ],
        scHdsxQyhs: [
          {
            required: true,
            message: '请输入首次申请并获得授信的企业户数',
            trigger: 'blur',
          },
        ],
        scHdsxDkje: [
          {
            required: true,
            message: '请输入首次申请并获得授信的贷款金额',
            trigger: 'blur',
          },
        ],
        jzlv: [
          {
            required: true,
            message: '请输入获得融资的企业平均贷款利率',
            trigger: 'blur',
          },
        ],
        scSqhdrzQyhs: [
          {
            required: true,
            message: '请输入首次申请并获得融资的企业户数',
            trigger: 'blur',
          },
        ],
        scSqhdrzJe: [
          {
            required: true,
            message: '请输入首次申请并获得融资金额',
            trigger: 'blur',
          },
        ],
      },
      uploading: false,
      data: [],
      loading: false,
      searchList: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        excelBtn: false,
        selection: false,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        columnBtn: true,
        refreshBtn: false,
        selectClearBtn: false,
        // searchBtn: true,
        menu: false,
        searchShowBtn: true,

        column: [
          {
            label: '银行机构名称',
            prop: 'yhjgmc',
            display: false,
          },
          {
            label: '上报数据年月',
            prop: 'sbsjny',
            display: false,
            search: false,
            type: 'month',
            format: 'yyyy-MM',
            pickerOptions: {
              disabledDate(time) {
                /* const t = new Date().getDate()
                                //当月之前（不包括当前月）
                                return time.getTime() > Date.now() - 8.64e7 * t */
                return time.getTime() > Date.now()
              },
            },
          },
          {
            label: '本年累计提出融资申请的企业户数（户）',
            prop: 'bnljRzsqQyhs',
            display: false,
          },
          {
            label: '获得融资的企业户数（户）',
            prop: 'rzhs',
            display: false,
          },
          {
            label: '其中：信用贷款户数（户）',
            prop: 'xyDkhs',
            display: false,
          },
          {
            label: '获得融资金额（万元）',
            prop: 'rzje',
            display: false,
          },
          {
            label: '其中：信用贷款金额（万元）',
            prop: 'xyDkje',
            display: false,
          },
          {
            label: '获得融资的企业平均贷款利率（%）',
            prop: 'jzlv',
            display: false,
          },
          {
            label: '本年累计首次申请授信的企业户数（户）',
            prop: 'bnljSxQyhs',
            searchSpan: 6,
            display: false,
          },
          {
            label: '首次申请并获得授信的企业户数（户）',
            prop: 'scHdsxQyhs',
            display: false,
            searchSpan: 6,
          },
          {
            label: '首次申请并获得授信的贷款金额（万元）',
            prop: 'scHdsxDkje',
            display: false,
          },
          {
            label: '首次申请并获得融资的企业户数（户）',
            prop: 'scSqhdrzQyhs',
            display: false,
          },
          {
            label: '首次申请并获得融资金额（万元）',
            prop: 'scSqhdrzJe',
            display: false,
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters(['token']),
  },
  created() {
    this.headers = { TOKEN: this.token }
    this.uploadUrl =
      process.env.VUE_APP_BASE_API + '/customer/dataFilling/import'
    this.getJgOptions()
  },
  methods: {
    getJgOptions() {
      getbank().then((res) => {
        this.jgOptions = res.data.map((item) => {
          return { label: item.deptValue, value: item.deptValue }
        })
      })
    },
    onLoad() {
      let searchList = this.searchList
      let params = {
        // date:searchList.sbsjny ? searchList.sbsjny : this.getTime(),
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      }
      this.loading = true
      searchHistory(params).then((res) => {
        if (res.status) {
          this.loading = false
          this.data = res.data.records
          this.page.total = Number(res.data.total)
        }
      })
    },
    getTime() {
      let curDate = new Date()
      let year = curDate.getFullYear()
      let month = curDate.getMonth()
      return year + '-' + month
    },
    /* 清空 */
    resetChange() {
      this.searchList = {}
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(val) {
      this.page.pageSize = val
    },
    handleAdd() {
      this.showFlag = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    mobanDown() {
      downLoadSqxys().then((res) => {
        let fileName = '数据填报模板.xlsx'
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(res)
        link.download = fileName
        link.click()
        window.URL.revokeObjectURL(link.href)
      })
    },
    handleSuccess(response, file, fileList) {
      if (response.status) {
        if (response.data == '操作成功') {
          this.$message.success(`${response.data}`)
        } else {
          var convt = response.data.replace(/\\n/g, '<br>')
          console.log(convt)
          this.$message({
            dangerouslyUseHTMLString: true,
            message: convt,
            type: 'error',
            duration: 5000,
          })
        }
        this.uploading = false
        this.onLoad()
      } else {
        this.uploading = false
        this.$message({
          dangerouslyUseHTMLString: true,
          message: `${response.msg}`,
          type: 'error',
          duration: 5000,
        })
      }
    },
    uploadProgress(event) {
      this.uploading = true
    },
    submitCheck() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let {
            bnljRzsqQyhs,
            rzhs,
            xyDkhs,
            rzje,
            xyDkje,
            bnljSxQyhs,
            scHdsxQyhs,
            scHdsxDkje,
            scSqhdrzQyhs,
            scSqhdrzJe,
          } = this.form
          if (Number(rzhs) > Number(bnljRzsqQyhs)) {
            this.$alert(
              '<p style="color:red;">获得融资的企业户数应 小于等于 本年累计提出融资申请的企业户数!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          if (Number(xyDkhs) > Number(rzhs)) {
            this.$alert(
              '<p style="color:red;">其中：信用贷款户数应 小于等于 获得融资的企业户数!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          if (Number(xyDkje) > Number(rzje)) {
            this.$alert(
              '<p style="color:red;">其中：信用贷款金额应 小于等于 获得融资金额!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          if (Number(scHdsxQyhs) > Number(bnljSxQyhs)) {
            this.$alert(
              '<p style="color:red;">首次申请并获得授信的企业户数应 小于等于 本年累计首次申请授信的企业户数!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          if (Number(scHdsxDkje) > Number(rzje)) {
            this.$alert(
              '<p style="color:red;">首次申请并获得授信的贷款金额应 小于等于 获得融资金额!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          if (Number(scSqhdrzQyhs) > Number(rzhs)) {
            this.$alert(
              '<p style="color:red;">首次申请并获得融资的企业户数 小于等于 获得融资的企业户数!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          if (Number(scSqhdrzJe) > Number(rzje)) {
            this.$alert(
              '<p style="color:red;">首次申请并获得融资金额 小于等于 获得融资金额!!!</p>',
              '注意事项',
              {
                dangerouslyUseHTMLString: true,
              }
            )
            return
          }
          this.$confirm('确定提交此次填报?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            let params = {
              ...this.form,
            }
            addDataFilling(params).then((res) => {
              if (res.status) {
                this.showFlag = false
                this.$message.success(`${res.msg}`)
                this.onLoad()
              } else {
                this.$message({
                  message: `${res.msg}`,
                  type: 'error',
                  duration: 5000,
                })
              }
            })
          })
        }
      })
    },
  },
}
</script>

<style scoped  lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.add {
  margin: 20px 0 0 0;
}
.btn {
  text-align: center;
}
.uplaod {
  display: inline-block;
  margin-left: 10px;
}
.tip {
  color: rgb(126, 119, 119);
  font-size: 14px;
}
.tips {
  color: rgb(245, 11, 11);
  font-size: 14px;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: 100%;
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}
</style>